<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>能耗模板</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="../../../../resources/lib/bui/css/dpl-min.css"
          th:href="@{/resources/lib/bui/css/dpl-min.css}"
          rel="stylesheet" />
    <link href="../../../../resources/lib/bui/css/bui-min.css"
          th:href="@{/resources/lib/bui/css/bui-min.css}"
          rel="stylesheet" />
    <script src="../../../../resources/lib/bui/js/jquery-1.8.1.min.js"
            th:src="@{/resources/lib/bui/js/jquery-1.8.1.min.js}"></script>
    <script src="../../../../resources/lib/bui/js/bui-min.js"
            th:src="@{/resources/lib/bui/js/bui-min.js}"></script>
    <script src="../../../../resources/lib/jquery/jquery.form.min.js"
            th:src="@{/resources/lib/jquery/jquery.form.min.js}"></script>
    <script src="../../../../resources/lib/jquery/jquery.util.js"
            th:src="@{/resources/lib/jquery/jquery.util.js}"></script>
</head>
<body th:fragment="add" >
<div id="addLinkDialog" class="span14 hide">
    <form id="uploadLinkForm" class="form-horizontal" style="margin-left: 5px;margin-top: 0px;" method="post"  enctype="multipart/form-data">
        <div class="row">
            <div class="control-group span16">
                <div class="controls">
                    <label >标题名称：</label>
                </div>
                <div class="controls">
                    <input id="titleName" name="titleName" type="text" class="input-large" data-rules="{maxlength:20}" data-messages="{maxlength:'长度不能超过20'}" />
                </div>
            </div>
        </div>
        <div class="row">
            <div class="control-group span16">
                <div class="controls">
                    <label >链接地址：</label>
                </div>
                <div class="controls">
                    <input id="linkName" name="linkName" type="text" class="input-large" data-rules="{required:true,maxlength:200}" data-messages="{required:'链接不能为空',maxlength:'长度不能超过200'}" /><input type="file" name="imgName" id="imgName">
                </div>
            </div>
        </div>
        <div class="row">
            <div class="control-group span14">
                <div class="controls">
                    <label class="radio offset1"><input name="iframeType"  type="radio"  value="no" checked>自适应：默认选项，链接内容自适应当前显示窗口。</label>
                </div>
                <div class="controls">
                    <label class="radio offset1"><input name="iframeType"  type="radio"  value="auto" >可调整：链接内容在当前显示窗口内可使用滚动条调整位置。</label>
                </div>
            </div>
        </div>
    </form>
</div>
<script th:inline="javascript" type="text/javascript">
    var BASE_URL = /*[[@{/}]]*/ '/';
    var Tooltip = BUI.Tooltip;
    var addLinkForm = null;
    var addLinkDialog = null;
    var tip = null;
    var imgUploadName = ""
//    var iframeName = "";//哪个iframe
//    var iframeIndex = 0;//模板的哪个部分
    var control = null;//哪个control
    var controlChildId = "";//control的哪个子节点
    var childIndex = 0;//子节点的哪个部分
    var showUrl = "";//用于显示
    //初始化页面
    $(function(){
        $('#imgName').css({'width':'65'});//隐藏掉真实的上传文件名称
        //初始化searchForm
        BUI.use('bui/form',function(Form){
            addLinkForm = new Form.HForm({
                srcNode:'#uploadLinkForm'
            }).render();
        });
        BUI.use('bui/form',function(Form){
            Form.Rules.add({
                name : 'fileType',
                msg : '文件格式不正确',
                validator : function(value,baseValue,formatMsg){ //验证函数，验证值、基准值、格式化后的错误信息
                    if(!checkImgType(value)){
                        return formatMsg;
                    }
                }
            });
        });
        BUI.use('bui/form',function(Form){
            Form.Rules.add({
                name : 'likeType',
                msg : '链接格式不正确',
                validator : function(value,baseValue,formatMsg){ //验证函数，验证值、基准值、格式化后的错误信息
                    if(!checkLinkType(value)){
                        return formatMsg;
                    }
                }
            });
        });
        //初始化筛选弹窗
        BUI.use(['bui/overlay'],function(Overlay){
            addLinkDialog = new Overlay.Dialog({
                title:'窗口链接',
                width:500,
                height:200,
                contentId:'addLinkDialog',
                closeAction : 'hide',
                success:function(){
                    var linkName = $('#linkName').val();
                    var titleName = $('#titleName').val();
                    var imgName = $('#imgName').val();
                    var autoFit =  $("input[name='iframeType']:checked").val();
                    if(linkName==showUrl[0]&&(imgName==''||imgName==null)){
                        if(autoFit==showUrl[1]&&titleName==showUrl[2]){
                            addLinkDialog.hide();
                            return;
                        }else{
                            BUI.use('bui/data',function(Data){
                                var Ajax = Data.Proxy.Ajax;
                                var ajax = new Ajax({
                                    url:BASE_URL+'nh/template/template_setting/updateIframeType'
                                });
                                ajax.read({nodeId: nodeId, number: childIndex,titleName:titleName,autoFit:autoFit},function(data){
                                    $('#title'+childIndex).html(titleName);
                                    addLinkDialog.hide();
                                    window.location.reload();
//                                    if(controlChildId=='c3_2'){
//                                        $('#iframe1').attr("src",data);
//                                    }else if(controlChildId=='c3_3'){
//                                        $('#iframe2').attr("src",data);
//                                    }else{
//                                        control.getChild(controlChildId).set('content','<iframe src=' +data + ' height="100%" width="100%" scrolling='+ autoFit+'></iframe>');
//                                    }
                                },this)
                            });
                        }
                    }else{
                        if(checkImgType(linkName)){//图片或静态html文件
                            if(addLinkForm.getField('linkName').isValid()) {//校验通过
                                $('#uploadLinkForm').ajaxSubmit({
                                    type: 'post',
                                    data: {nodeId: nodeId, number: childIndex,autoFit:autoFit},//nodeId表示树节点Id，number表示所选模板的第几部分
                                    url: BASE_URL + "nh/template/template_setting/upload",
                                    success: function (data) {
                                        if(data!=null){
                                            if(data.src!=""){
                                                imgUploadName = data.src;
                                                addLinkDialog.hide();
                                                if(imgUploadName!=""&&checkImgType(imgUploadName)){
                                                    if(controlChildId=='c3_2'){
                                                        $('#iframe1').attr("src",imgUploadName);
                                                    }else if(controlChildId=='c3_3'){
                                                        $('#iframe2').attr("src",imgUploadName);
                                                    }else{
                                                        if(judgeLink(linkName)){
                                                            control.getChild(controlChildId).set('content','<iframe src=' +imgUploadName + ' height="100%" width="100%" scrolling='+ autoFit+'></iframe>');
                                                        }else if(judgeImg(linkName)){
                                                            control.getChild(controlChildId).set('content','<img src='+imgUploadName+' height="100%" width="100%">');
                                                        }
                                                    }
                                                    $('#title'+childIndex).html(titleName);
                                                    imgUploadName="";
                                                }
                                            }
                                        }
                                    }
                                })
                            }else{
                                addLinkDialog.show();
                            }
                        }else{
                            addLinkForm.getField('linkName').valid();
                            if(addLinkForm.getField('linkName').isValid()){
                                BUI.use('bui/data',function(Data){
                                    var Ajax = Data.Proxy.Ajax;
                                    var ajax = new Ajax({
                                        url:BASE_URL+'nh/template/template_setting/saveLinkName'
                                    });
                                    ajax.read({nodeId: nodeId, number: childIndex,linkName:linkName,titleName:titleName,autoFit:autoFit},function(data){
                                        $('#title'+childIndex).html(titleName);
                                        addLinkDialog.hide();
                                        if(controlChildId=='c3_2'){
                                            $('#iframe1').attr("src",linkName);
                                        }else if(controlChildId=='c3_3'){
                                            $('#iframe2').attr("src",linkName);
                                        }else{
                                            control.getChild(controlChildId).set('content','<iframe src=' +linkName + ' height="100%" width="100%" scrolling='+ autoFit+'></iframe>');
                                        }
                                    },this)
                                });
                            }else{
                                addLinkDialog.show();
                            }
                        }
                    }
                }
            });
        });
    });
    //声音文件改变选择时触发事件
    $('#imgName').on('change',function(){
        addLinkForm.getField('linkName').clearErrors(false);
        var name = $('#imgName').val();
        var showName = name.substring(name.lastIndexOf('\\')+1);
        $('#linkName').val(showName);
        addDefaultValid("img");
        addLinkForm.getField('linkName').valid();
        addLinkForm.getField('linkName').clearCache();
    });

    $('#linkName').on('change',function(){
        addLinkForm.getField('linkName').clearErrors(false);
        var linkName = $('#linkName').val();
        addDefaultValid("link");
        imgUploadName = "";
        addLinkForm.getField('linkName').valid();
        addLinkForm.getField('linkName').clearCache();
    });

    $('#titleName').on('change',function(){
        addLinkForm.getField('titleName').clearErrors(false);
        var titleName = $('#titleName').val();
        addLinkForm.getField('titleName').valid();
        addLinkForm.getField('titleName').clearCache();
    });

    function showDialog(controlName,name,index,nodeId){
        control = controlName;
        controlChildId = name;
        childIndex = index;
        BUI.use('bui/data',function(Data) {
            var Ajax = Data.Proxy.Ajax;
            var ajax = new Ajax({
                url: BASE_URL + 'nh/template/template_setting/getUrl'
            });
            ajax.read({nodeId: nodeId}, function (data) {
                if(data!=null){
                    switch(name) {
                        case 'c1_1' : showUrl =  data[0];
                            break;
                        case 'c2_1' : showUrl =  data[0];
                            break;
                        case 'c2_2' : showUrl =  data[1];
                            break;
                        case 'c3_1' : showUrl =  data[0];
                            break;
                        case 'c3_2' : showUrl =  data[1];
                            break;
                        case 'c3_3' : showUrl =  data[2];
                            break;
                        case 'c5_1' : showUrl =  data[0];
                            break;
                        case 'c5_2' : showUrl =  data[1];
                            break;
                        case 'c5_3' : showUrl =  data[2];
                            break;
                        case 'c5_4' : showUrl =  data[3];
                            break;
                        case 'c5_5' : showUrl =  data[4];
                            break;
                    }
                }
                $('#linkName').val(showUrl[0]);
                $('#titleName').val(showUrl[2]);
                var selects = document.getElementsByName("iframeType");
                for (var i=0; i<selects.length; i++){
                    if (selects[i].value==showUrl[1]) {
                        selects[i].checked= true;
                        break;
                    }
                }
                $('#imgName').val('');
                addLinkForm.getField('linkName').clearErrors(false);
                addLinkDialog.show();
            })
        })
    }

    //给自定义提示声音添加校验规则
    function addDefaultValid(type){
        var field = addLinkForm.getField('linkName');
        field.addRule('required',true,'链接不能为空');
        //field.addRule('maxlength',true,'长度不能超过200');
        if(type=="img"){
            field.removeRule('likeType');
            field.addRule('fileType',true);
        }else if(type=="link"){
            field.removeRule('fileType');
            field.addRule('likeType',true);
        }
        addLinkForm.getField('linkName').valid();
    }

    function checkImgType(imgName){
        var photoRegex = /\.jpg$|\.jpeg$|\.gif$|\.png$|\.bmp$|\.html$|\.htm$/i;//图片格式
        if(!photoRegex.test(imgName)){
            return false;
        }else{
            return true;
        }
    }

    function checkLinkType(linkName){
        var linkRegex = /^http:\/\/|^https:\/\/|\.jpg$|\.jpeg$|\.gif$|\.png$|\.bmp$|\.html$|\.htm$/i;//链接格式
        if(!linkRegex.test(linkName)){
            return false;
        }else{
            return true;
        }
    }


    function judgeImg(name){
        var photoRegex = /\.jpg$|\.jpeg$|\.gif$|\.png$|\.bmp$/i;//图片格式
        if(!photoRegex.test(name)){
            return false;
        }else{
            return true;
        }
    }

    function judgeLink(name){
        var linkRegex = /^http:\/\/|^https:\/\/|\.html$|\.htm$/i;//链接格式
        if(!linkRegex.test(name)){
            return false;
        }else{
            return true;
        }
    }
</script>
</body>
</html>